<script setup lang="ts">
import {useCounterStore} from '@/stores/counter.ts'
import {nextTick, onMounted, ref, watchEffect} from "vue";
import {listProductionType} from '@/api/production-type.ts'
import {list} from '@/api/team-introduction.ts'
const baseUrl=import.meta.env.VITE_API_URL;
const counter = useCounterStore()
watchEffect( ()=>{
  const showOpacity=counter.showOpacity
  nextTick(()=>{
    if (showOpacity){
      document.getElementById('menu-demo').style.backgroundColor='rgba(255, 255, 255, 0)'
      document.getElementById('menu-demo').style.minHeight='100px'
    }else{
      document.getElementById('menu-demo').style.backgroundColor='rgba(255, 255, 255, 1)'
      document.getElementById('menu-demo').style.minHeight='80px'
    }
  })
})
onMounted(()=>{
  getProductionType()
  getTeamIntroduction()
})
const teamIntroduction=ref()
const getTeamIntroduction=()=>{
  list({}).then(res=>{
    teamIntroduction.value = res.data[0]
  })
}
const productionTypes = ref([])
const getProductionType = () => {
  listProductionType({}).then(res=>{
    productionTypes.value=res.data;
  })
}
</script>

<template>
<div class="head-container" id="menu-demo">
  <div class="icon">
    <img
        style="width: 50px;height: 50px;border-radius: 5px"
        :src="teamIntroduction && teamIntroduction.imgIcon ? baseUrl+teamIntroduction.imgIcon:''"
        alt="Element logo"
    />
  </div>
  <el-menu
      ellipsis
      class="el-menu-popper-demo"
      mode="horizontal"
      :popper-offset="16"
      background-color="rgba(255,255,255,0)"
      text-color="black"
      active-text-color="yellowgreen"
      default-active="/"
      router
      close-on-click-outside
      show-timeout="1000"
      hide-timeout="1000"
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-sub-menu index="/production/0">
      <template #title>
        产品案例
      </template>
      <el-menu-item v-for="item in productionTypes" :index="'/production/'+item.id">{{item.name}}</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/teamintroduction">团队介绍</el-menu-item>
    <el-menu-item index="/contactus">联系我们</el-menu-item>
  </el-menu>
</div>
</template>

<style scoped>
.el-menu-item{
  font-size: 18px;
  font-weight: 500;
  color: black;
  //text-shadow: 2px 2px 4px lightsteelblue !important; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
  padding-left: 50px;
  padding-right: 50px;
  justify-content: center;
}
.el-menu-item:hover{
   color: yellowgreen !important;
}
::v-deep(.el-sub-menu__title){
  font-size:18px !important;
  font-weight: 500;
  color: black  !important;
  //text-shadow: 2px 2px 4px lightsteelblue; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}

.el-carousel__arrow{
  width: 200px;
  height: 100px;
}
.head-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: rgba(255, 255, 255, 1);
  min-height: 100px;
}
.icon{
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}
.el-menu-popper-demo{
  padding-left: 10%;
  width: 90%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  border: none;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 5px solid var(--el-menu-active-color);
}
</style>